<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            height: 100%;
            width: 100%;
        }
        .box{
        width: 100%;
        /* height: 100%; */
        /* 把内容或图片 分为几列 */
        column-count: 4;
        /* column-width: 100px; */
        /* columns:150px 4; */
        column-gap: 10px;
        column-rule: 5px double blueviolet;
        background-image: url(../images/a.png);
    }
    .box div{
        border: 1px solid;
        margin-bottom: 10px;
        break-inside: avoid;
        border-radius: 5%;
        overflow: hidden;
        background-color:rgba(yellow, green, blue, 0.2);
    }
    .box img{
        width: 100%;
        /* height: 100%; */
    }
    .box p{
        text-align: center;
        line-height: 50px;
    }
    </style>
  
</head>
<body>
  <div class="box">
      <div>
          <img src="../images/1.jpg" alt="">
          <p>明星1</p>
      </div>
      <div>
          <img src="../images/2.jpg" alt="">
          <p>明星2</p>
      </div>
      <div>
          <img src="../images/3.jpg" alt="">
          <p>明星3</p>
      </div>
      <div>
          <img src="../images/4.jpg" alt="">
          <p>明星4</p>
      </div>
      <div>
          <img src="../images/5.jpg" alt="">
          <p>明星5</p>
      </div>
      <div>
          <img src="../images/6.jpg" alt="">
          <p>明星6</p>
      </div>
      <div>
          <img src="../images/7.jpg" alt="">
          <p>明星7</p>
      </div>
      <div>
          <img src="../images/8.jpg" alt="">
          <p>明星8</p>
      </div>
      <div>
          <img src="../images/9.jpg" alt="">
          <p>明星9</p>
      </div>
      <div>
          <img src="../images/10.jpg" alt="">
          <p>明星10</p>
      </div>
      <div>
          <img src="../images/11.jpg" alt="">
          <p>明星11</p>
      </div>
      <div>
          <img src="../images/12.jpg" alt="">
          <p>明星12</p>
      </div>
      <div>
          <img src="../images/13.jpg" alt="">
          <p>明星13</p>
      </div>
      <div>
          <img src="../images/14.jpg" alt="">
          <p>明星14</p>
      </div>
      <div>
          <img src="../images/15.jpg" alt="">
          <p>明星15</p>
      </div>
      <div>
          <img src="../images/16.jpg" alt="">
          <p>明星16</p>
      </div>
      <div>
          <img src="../images/17.jpg" alt="">
          <p>明星17</p>
      </div>
      <div>
          <img src="../images/18.jpg" alt="">
          <p>明星18</p>
      </div>
      <div>
          <img src="../images/19.jpg" alt="">
          <p>明星19</p>
      </div>
      <div>
          <img src="../images/20.jpg" alt="">
          <p>明星20</p>
      </div>
      <div>
          <img src="../images/21.jpg" alt="">
          <p>明星21</p>
      </div>
      <div>
          <img src="../images/22.jpg" alt="">
          <p>明星22</p>
      </div>
      <div>
          <img src="../images/23.jpg" alt="">
          <p>明星23</p>
      </div>
      <div>
          <img src="../images/24.jpg" alt="">
          <p>明星24</p>
      </div>
      <div>
          <img src="../images/25.jpg" alt="">
          <p>明星25</p>
      </div>
      <div>
          <img src="../images/26.jpg" alt="">
          <p>明星26</p>
      </div>
      <div>
          <img src="../images/27.jpg" alt="">
          <p>明星27</p>
      </div>
      <div>
          <img src="../images/28.jpg" alt="">
          <p>明星28</p>
      </div>
      <div>
          <img src="../images/29.jpg" alt="">
          <p>明星29</p>
      </div>
      <div>
          <img src="../images/30.jpg" alt="">
          <p>明星30</p>
      </div>
      <div>
          <img src="../images/31.jpg" alt="">
          <p>明星31</p>
      </div>
      <div>
          <img src="../images/32.jpg" alt="">
          <p>明星32</p>
      </div>
      <div>
          <img src="../images/33.jpg" alt="">
          <p>明星33</p>
      </div>
      <div>
          <img src="../images/34.jpg" alt="">
          <p>明星34</p>
      </div>
      <div>
          <img src="../images/35.jpg" alt="">
          <p>明星35</p>
      </div>
      <div>
          <img src="../images/36.jpg" alt="">
          <p>明星36</p>
      </div>
      <div>
          <img src="../images/37.jpg" alt="">
          <p>明星37</p>
      </div>
      <div>
          <img src="../images/38.jpg" alt="">
          <p>明星38</p>
      </div>
      <div>
          <img src="../images/39.jpg" alt="">
          <p>明星39</p>
      </div>
      <div>
          <img src="../images/40.jpg" alt="">
          <p>明星40</p>
      </div>
      <div>
          <img src="../images/41.jpg" alt="">
          <p>明星41</p>
      </div>
      <div>
          <img src="../images/42.jpg" alt="">
          <p>明星42</p>
      </div>
      <div>
          <img src="../images/43.jpg" alt="">
          <p>明星43</p>
      </div>
      <div>
          <img src="../images/44.jpg" alt="">
          <p>明星44</p>
      </div>
      <div>
          <img src="../images/45.jpg" alt="">
          <p>明星45</p>
      </div>
      <div>
          <img src="../images/46.jpg" alt="">
          <p>明星46</p>
      </div>
      <div>
          <img src="../images/47.jpg" alt="">
          <p>明星47</p>
      </div>
      <div>
          <img src="../images/48.jpg" alt="">
          <p>明星48</p>
      </div>
      <div>
          <img src="../images/49.jpg" alt="">
          <p>明星49</p>
      </div>
      <div>
          <img src="../images/50.jpg" alt="">
          <p>明星50</p>
      </div>
  </div>
</body>
</html>